import React from 'react';
import { Animated, Text, View, ScrollView, StyleSheet } from 'react-native';

export default class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // 透明度初始值设为0
  }

  componentDidMount() {
    Animated.timing(                  // 随时间变化而执行动画
      this.state.fadeAnim,            // 动画中的变量值
      {
        toValue: 1,                   // 透明度最终变为1，即完全不透明
        duration: 10000,              // 让动画持续一段时间
      }
    ).start();                        // 开始执行动画
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <ScrollView
      horizontal = 'true'>
        <View style={styles.view}>
          <Text>1</Text>
        </View>
        <View style={styles.view}>
          <Text>2</Text>
        </View>
        <View style={styles.view}>
          <Text>3</Text>
        </View>
        <View style={styles.view}>
          <Text>4</Text>
        </View>
        <View style={styles.view}>
          <Text>5</Text>
        </View>
        <View style={styles.view}>
          <Text>6</Text>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 60,
    flex: 1,
    textAlign: 'center',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },
  view: {
    flex: 1,
    width: 414,
    textAlign: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});